<template>
	<view class="flex-col page">
		<scroll-view scroll-y="true" class="scroll">
			<view class="flex-col group">
				<image :src="$IMG_URL + '16557826909880786013.png'" class="image_1" />
				<view class="flex-col group_1">
					<view class="flex-col section_1">
						<view class="flex-row">
							<image :src="$IMG_URL + '16557826792503103103.png'" class="image_2" />
							<text class="text_1">设计优化介绍</text>
						</view>
						<text class="text_2">
							由资深设计师帮你一起从空间布局、功能、风格、色彩搭配四大方面评判审阅设计师的成果，避免设计缺憾提升“个性化”设计品质！
						</text>
					</view>
					<!-- 我的房屋信息 -->
					<view class="flex-col section_2">
						<view class="justify-between section_3">
							<text class="text_3">我的房屋信息</text>
							<image :src="$IMG_URL + '16557826925530282387.png'"
								@click="go('/pages/index/editHourse?id='+projectId)" class="image_4" />
						</view>
						<view class="flex-col group_3" v-if="address">
							<view class="justify-between">
								<text class="text_4">房屋位置</text>
								<text class="text_5">{{ address }}</text>
							</view>
							<view class="flex-col group_5">
								<view class="justify-between">
									<text class="text_6">房屋面积</text>
									<text class="text_7">{{ roomArea }}m²</text>
								</view>
								<view class="justify-between group_7">
									<text class="text_8">房屋类型</text>
									<text class="text_9">{{ roomTypeName }}</text>
								</view>
							</view>
						</view>
						<u-empty v-else mode="data" width="160" marginTop="0%" textSize="25rpx"
							icon="http://cdn.uviewui.com/uview/empty/car.png"></u-empty>
					</view>
					<!-- 选择设计类别 -->
					<view class="flex-col section_4">
						<view class="flex-col group_8">
							<view class="flex-row group_9">
								<image :src="$IMG_URL + '16557826792503103103.png'" class="image_2" />
								<text class="text_10">选择设计类别</text>
							</view>
						</view>
						<view class="flex-row u-m-l-20 u-p-b-20" v-if="radioItem.length>0">
							<radio-group class="uni-list">
								<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in radioItem"
									:key="index" @click="Type(item.serviceTypeId)">
									<view class="flex-row u-m-t-40">
										<view>
											<label>
												<text>{{item.detailedName}}</text>
											</label>
											<image @click.stop="maskLoad(index)"
												:src="$IMG_URL + '16557826926394646541.png'" class="image_6 image_8" />
											<view class="flex-row group_16">
												<text
													class="text_15">{{item.cityLevel==1?item.firstPrice:(item.cityLevel==2?item.secondPrice:item.thirdPrice)}}/m²</text>
											</view>
										</view>
									</view>
									<!-- 选项按钮 -->

									<view class="flex-row group-ends">
										<radio size="2px" :checked="info.designTypeId==item.serviceTypeId "></radio>
									</view>
								</label>
							</radio-group>
							<view class="flex-col" style="transform:translateX(-100px) ;">
								<text class="text_13 group-cell">（施工图+效果图）</text>
								<text class="text_13 group-cell1">（每个软装细节）</text>
							</view>
						</view>
						<u-empty v-else mode="data" width="160" marginTop="0%" textSize="25rpx"
							icon="http://cdn.uviewui.com/uview/empty/car.png"></u-empty>
						<!-- 优惠券 -->
						<view class="flex-col group_12" v-if="coupon.length>0">
							<view class="flex-col">
								<view class="divider">
									<view style=""></view>
								</view>
								<view class="justify-between group_18" @click="couponShow=true">
									<text class="text_17">选择优惠券</text>
									<view class="flex-row">
										<text class="text_18">{{couponAmount>0?'-¥'+couponAmount:'请选择'}}</text>
										<image :src="$IMG_URL + '16557838861113221762.png'" class="image_10" />
									</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 服务流程 -->
					<view class="flex-col list">
						<!-- 服务流程 -->
						<view class="flex-col list">
							<view class="flex-col list-item">
								<view class="flex-row">
									<image :src="$IMG_URL + '16557826792503103103.png'" class="image_11" />
									<text class="text_20">服务流程</text>
								</view>
								<view class="flex-col items-center group_21">
									<u-parse :content="content.serviceProcess"></u-parse>
								</view>
							</view>
						</view>
						<!-- 服务保障 -->
						<view class="flex-col list">
							<view class="flex-col list-item">
								<view class="flex-row">
									<image :src="$IMG_URL + '16557826792503103103.png'" class="image_11" />
									<text class="text_20">服务保障</text>
								</view>
								<view class="flex-col items-center group_21">
									<u-parse :content="content.serviceGuarantee"></u-parse>
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
		</scroll-view>
		<view class="justify-between tab-bar">
			<view class="group_23">
				<text class="text_25">￥</text>
				<text class="text_26">{{money}}</text>
			</view>
			<view class="flex-row">
				<view class="flex-col items-center group_25" @click="go('/pages/my/message/kefu')">
					<image :src="$IMG_URL + '16557827948053418641.png'" class="image_17" />
					<text class="text_27">在线咨询</text>
				</view>
				<view class="flex-col items-center text-wrapper_1" @click="submits"><text class="text_28">确认</text>
				</view>
			</view>
		</view>
		<shop-coupon  v-if="couponShow" :amount="money" :list="coupon" @confirm="couponConfirm"
			@close="couponShow=false"></shop-coupon>
		<u-modal @confirm='showModal = false' :show="showModal" :title="title" :content='tipContent'></u-modal>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				showModal: false,
				title: '',
				tipContent: "",


				coupon: [],
				couponShow: false,
				radioItems: [{
						price: '10',
						detailedName: '基础设计'
					},
					{
						price: '100',
						detailedName: '高级设置',
						checked: 'true'
					}
				],

				//房屋信息
				radioItem: [],
				room_area: '',
				room_type: '',
				roomTypeName: '',
				district: '',
				address: '',
				projectId: '',
				roomArea: '',

				//设计类别
				value: '',
				cityName: '',
				designTypeName: '',
				position: '',
				contractExamineType: '',
				info: {
					projectId: 0, //房屋ID
					couponsId: 0, //优惠券id
					designTypeId: 0, //设计类别id
					cityCode: 0 //区ID
				},
				money: 0,
				content: {},
				couponAmount: 0
			};
		},
		created() {

		},
		async onShow() {
			this.resetData();
			await this.$store.dispatch('checkHouse');
			await this.rooms();
			await this.getcontent();
			await this.getCoupon();

		},
		methods: {
            resetData()
			{
				this.couponAmount=0;
				this.info.couponsId=0;
			},
			Type(id) {
				this.info.designTypeId = id;
				this.info.couponsId = this.couponsId = 0;
				this.couponAmount = 0;
				this.getMoney();

			},
			// tips(title, content) {

			//     this.showModal = true;
			// 	this.title = title;
			// 	this.content = content;
			// },

			maskLoad(idx) {
				console.log(idx);
				if (idx === 0) {
					this.title = '基础设计'
					this.tipContent = '包含（施工图+效果图）与房屋设计理念，包含（施工图+效果图）与房屋设计理念！'
				} else {
					this.title = '高级设计'

					this.tipContent = '包含（施工图+效果图）与房屋设计理念，包含（施工图+效果图）与房屋设计理念！'
				}
				this.showModal = true
			},
			getcontent() {
				this.$http('consult.queryServiceDetails', {
					type: 2
				}).then(r => {
					if (r.code == 200) {
						this.content = r.data;
						console.log(r.data)
					}
				});
			},
			getCoupon() {

				this.$http('coupon.coupon').then(r => {

					if (r.code == 200) {
						if (r.data) {
							this.coupon = r.data;
						}

					}
				});
			},
			couponConfirm(coupon) {
				let {
					coupon_id,
					amount,
					couponsId
				} = coupon;

				this.info.couponsId = couponsId;
				this.couponAmount = amount;
				this.couponShow = false;
				this.getMoney()
			},
			rooms() {
				this.$http('designOptimize.queryHousing').then(r => { //获取房屋信息

					if (r.code == 200) {



						this.projectId = r.data.project.projectId;
						this.roomTypeName = r.data.project.roomTypeName
						this.roomArea = r.data.project.roomArea //房间面积
						this.district = r.data.project.district
						this.address = r.data.project.provinceName + ' ' + r.data.project.cityName + ' ' + r
							.data
							.project.districtName + ' ' + r.data.project.position
						this.districtName + r.data.project.position //精确位置

						this.info.projectId = r.data.project.projectId
						this.info.cityCode = r.data.project.city;
						this.hetongType(this.info.cityCode);




						// this.$u.toast("房屋信息：" + r.data.project.projectId);
					}
				});
			},
			hetongType(city) {
				this.$http('check.queryServiceType', { //设计类别
					cityId: city,
					serviceName: '设计优化'
				}).then(r => {
					if (r.code == 200) {
						this.radioItem = r.data;
						if (r.data.length > 0) {
							this.info.designTypeId = r.data[0].serviceTypeId;
							this.getMoney();
						}
					} else {
						this.$u.toast(r.msg);
					}
				});
			},

			getMoney() { //获取金额
				console.log('getmoney');
				console.log(this.info);
				this.$http('designOptimize.addsigning', this.info).then(r => {
					if (r.code == 200) {
						this.money = r.data;
					} else {
						console.log(r.msg)
					}
				});
			},

			submits() {


				this.$http('designOptimize.placeOrder', this.info).then(r => {
					if (r.code == 200) {
						this.money = r.data;
						this.go('/pages/pay/pay?orderid=' + r.data);
					} else {
						console.log(r.msg)
					}

				});
			}


		}
	}
</script>

<style scoped lang="scss">
	.scroll {
		height: calc(100vh - 100rpx);
	}

	.group-ends {
		position: absolute;
		margin-left: 80%;
		transform: translateY(-40px);
	}

	.list-item {
		padding: 29rpx 24rpx 32rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.image_2 {
		margin-top: 18rpx;
		width: 26rpx;
		height: 16rpx;
	}

	.group_21 {
		margin-top: 40rpx;
	}

	.image_6 {
		width: 28rpx;
		height: 28rpx;
		z-index: 1;
	}

	.image_11 {
		margin-top: 12rpx;
		width: 26rpx;
		height: 16rpx;
	}

	.text_20 {
		margin-left: 16rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.page {
		background-color: #f6f7f9ff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group {
		padding-bottom: 32rpx;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.tab-bar {
		padding: 11rpx 16rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		box-shadow: 0px -1rpx 0px 0px #00000014;

	}

	.image_1 {
		flex-shrink: 0;
		width: 100vw;
		height: 46.6667vw;
	}

	.group_1 {
		margin-top: -83rpx;
		padding: 0 24rpx;
		position: relative;
	}

	.group_23 {
		align-self: center;
		height: 38rpx;
	}

	.section_1 {
		padding: 29rpx 24rpx 68rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.section_2 {
		margin-top: 20rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.section_4 {
		margin-top: 24rpx;
		padding-top: 29rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.list {
		margin-bottom: 50rpx;
	}

	.text_25 {
		color: #fe641a;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 23rpx;
	}

	.text_26 {
		color: #fe641a;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.group_25 {
		margin-bottom: 5rpx;
	}

	.text-wrapper_1 {
		margin-left: 56rpx;
		margin-top: 5rpx;
		// padding: 14rpx 25rpx;
		background-color: #1d6aff;
		border-radius: 36rpx;
		width: 220rpx;
		height: 72rpx;
	}

	.text_2 {
		margin-top: 34rpx;
		color: #666666;
		font-size: 26rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 30rpx;
		text-align: left;
	}

	.section_3 {
		padding: 29rpx 24rpx 31rpx;
		background-color: #ebf2ff;
		border-radius: 16rpx 16rpx 0px 0px;
	}

	.group_3 {
		padding: 30rpx 22rpx 41rpx 24rpx;
	}

	.group_8 {
		padding: 0 24rpx;
	}

	.group_12 {
		margin-top: 41rpx;
	}

	.list-item:last-of-type {
		margin-top: 20rpx;
	}

	.image_17 {
		flex-shrink: 0;
		width: 54rpx;
		height: 54rpx;
	}

	.text_27 {
		color: #666666;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 23rpx;
	}

	.text_28 {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_1 {
		margin-left: 16rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		font-weight: bold;
	}

	.text_3 {
		margin-bottom: 4rpx;
		color: #1d6aff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.image_4 {
		margin-top: 10rpx;
		width: 30rpx;
		height: 32rpx;
	}

	.group_5 {
		margin-top: 39rpx;
	}

	.group_9 {
		padding-bottom: 34rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.group_10 {
		margin-top: 30rpx;
	}

	.group_11 {
		margin-top: 26rpx;
	}

	.group_13 {
		padding: 0 24rpx 35rpx;
	}

	.text_4 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_5 {
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_7 {
		margin-top: 33rpx;
	}

	.text_10 {
		margin-left: 16rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		font-weight: bold;
	}

	.text_11 {
		margin-bottom: 3rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_7 {
		margin-left: 15rpx;
		margin-top: 8rpx;
	}

	.text_12 {
		color: #fe641a;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_13 {
		margin-left: 25rpx;
		margin-bottom: 9rpx;
		color: #666666;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.group-cell {
		position: relative;
		margin-top: 50%;
	}

	.group-cell1 {
		position: relative;
		margin-top: 48%;
	}

	.image_9 {
		align-self: center;
		border-radius: 50%;
		width: 36rpx;
		height: 36rpx;
	}

	.divider {
		border: 0.5px #eeeeee solid;
	}

	.group_18 {
		padding: 30rpx 24rpx 35rpx;
	}

	.text-wrapper {
		padding: 20rpx 0 36rpx;
		background-color: #ff371d0f;
		border-radius: 0px 0px 16rpx 16rpx;
	}

	.text_22 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_13 {
		margin-top: 33rpx;
		border-radius: 16rpx;
		width: 654rpx;
		height: 328rpx;
	}

	.text_23 {
		margin-top: 30rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_14 {
		margin-top: 33rpx;
		border-radius: 16rpx;
		width: 654rpx;
		height: 328rpx;
	}

	.text_6 {
		margin-bottom: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_7 {
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_8 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_9 {
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_16 {
		margin-top: 26rpx;
	}

	.text_17 {
		margin-bottom: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_19 {
		margin-top: 6rpx;
	}

	.text_19 {
		margin-left: 24rpx;
		color: #ff371d;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
		text-align: left;
	}

	.text_14 {
		margin-bottom: 3rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_8 {
		margin: 8rpx 134rpx 0 15rpx;
	}

	.text_15 {
		color: #fe641a;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_16 {
		margin-left: 25rpx;
		margin-bottom: 9rpx;
		color: #666666;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_18 {
		color: #fe641a;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.image_10 {
		margin: 8rpx 0 4rpx 22rpx;
		flex-shrink: 0;
		width: 14rpx;
		height: 26rpx;
	}
</style>
